<template>
    <div class="nav-bar">
        <div class="nav-btn" @click="gotoPage('home')">
            <img src="@/assets/home.png" v-if="!Navbar[0]" alt="">
            <img src="@/assets/home_active.png" v-else alt="">
            <div :style='Navbar[0] ? "color:#0c34ba" : "color:#1e1e1e"'>首页</div>
        </div>
        <div class="nav-btn" @click="gotoPage('menu')">
            <img src="@/assets/menu.png" v-if="!Navbar[1]" alt="">
            <img src="@/assets/menu_active.png" v-else alt="">
            <div :style='Navbar[1] ? "color:#0c34ba" : "color:#1e1e1e"'>菜单</div>
        </div>
        <div class="nav-btn" @click="gotoPage('shopbag')">
            <img src="@/assets/shopbag.png" v-if="!Navbar[2]" alt="">
            <img src="@/assets/shopbag_active.png" v-else alt="">
            <div :style='Navbar[2] ? "color:#0c34ba" : "color:#1e1e1e"'>购物袋</div>
        </div>
        <div class="nav-btn" @click="gotoPage('my')">
            <img src="@/assets/my.png" v-if="!Navbar[3]" alt="">
            <img src="@/assets/my_active.png" v-else alt="">
            <div :style='Navbar[3] ? "color:#0c34ba" : "color:#1e1e1e"'>我的</div>
        </div>
    </div>
</template>


<script setup lang="ts">
import { defineProps } from 'vue'
import { useRouter } from "vue-router"


let router: any = useRouter();

let Num = defineProps({
    iNum: {
        type: String,
        default: ''
    }
})
// console.log(Num.iNum);

let Navbar = reactive([0, 0, 0, 0]);

Navbar[Number(Num.iNum)] = 1;

function gotoPage(name: string): void {
    router.push({ name });
}

</script>

<style lang="less" scoped>
.nav-bar {
    width: 100vw;
    height: 50px;
    display: flex;
    position: fixed;
    bottom: 0;
    background-color: #fff;

    .nav-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 12px;

        img {
            width: 20px;
            height: 20px;
            margin-bottom: 2px;
        }
    }
}
</style>